<template>
	<div class="user-block">
		<a-popover position="br" trigger="click" :content-style="{padding:0}">
			<div class="user-row">
				<a-avatar :size="32" :style="{ backgroundColor: '#00d0b6' }">
					{{user.userName.charAt(0)}}
				</a-avatar>
				<span style="margin-left:10px;color:var(--color-text-1)">{{user.userName}}</span>
				<icon-down />
			</div>
			<template #content>
				<a-menu>
					<a-menu-item>
						<icon-user />
						个人中心
					</a-menu-item>
					<a-menu-item>
						<icon-settings />
						设置
					</a-menu-item>
					<a-menu-item @click="logout">
						<icon-send />
						退出登录
					</a-menu-item>
				</a-menu>
			</template>
		</a-popover>
	</div>
</template>

<script lang="ts" setup>
import {useRouter} from 'vue-router';
import {removeToken} from '@/utils/token'
import { computed, ref } from 'vue';
import config from '@/config';
import { useUserStore } from '@/stores/user/user';
import { IconUser,IconSettings,IconSend } from '@arco-design/web-vue/es/icon';

let store = useUserStore()
let router = useRouter()
let user=computed(()=>{
	return store.user
})


let showPasswordDialog=ref(false)

function logout(){
	removeToken()
	router.replace({name:config.loginRouteName})
}

function onPwdChange(){

}
</script>

<style lang="scss" scoped>
.user-block{
	cursor: pointer;
	display: flex;
	font-size: 14px;
	.user-row{
		display: flex;
		align-items: center;
		font-size: 14px;
		margin-right: 20px;
	}
	:deep(.arco-popover-popup-content){
		padding: 0;
	}
}
</style>
